<template>
  <div class="bar-wrap">
    <div class="each-icon">
      <span class="icon-collection"></span>
      <p>{{ collectionCount }}</p>
    </div>
    <div class="each-icon">
      <span class="icon-comment"></span>
      <p>{{ commentCount }}</p>
    </div>
    <div class="each-icon">
      <span class="icon-share"></span>
      <p>{{ shareCount }}</p>
    </div>
    <div class="each-icon">
      <span class="icon-download"></span>
      <p>下载</p>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class MusicListBarComponent extends Vue {
  @Prop({ default: 0 })
  collectionCount: number;
  @Prop({ default: 0 })
  commentCount: number;
  @Prop({ default: 0 })
  shareCount: number;
  @Prop({ default: 0 })
  fromType: number;
}
</script>

<style lang="scss">
.bar-wrap {
  display: flex;
  .each-icon {
    flex: 1;
    text-align: center;
  }
}
</style>
